<template>
  <div id="home" ref="allEcharts"></div>
</template>

<script>
// @ is an alias to /src
// 传值：item的size；横坐标；纵坐标；item的背景色；整体的背景色，上面的数字是否显示
export default {
  name: "waterDrop",
  props: {
    outerColor: {
      type: String,
      default: "#10b9ff",
    },
    chartData: {
      type: String | Number,
    },
    // 是否需要中央文字出现 %
    labelNeedPer: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    initChart() {
      const that = this;
      if (!this.myChart) {
        this.myChart = this.$echarts.init(this.$refs.allEcharts);
      }
      let option = {
        series: [
          {
            type: "liquidFill",
            radius: "78%",
            center: ["50%", "50%"],
            color: [this.outerColor, this.outerColor, this.outerColor], //水波
            data: [
              (this.chartData * 1) / 100,
              (this.chartData * 1) / 100,
              (this.chartData * 1) / 100,
            ], // data个数代表波浪数，第一项的数字代表到百分之多少了
            backgroundStyle: {
              borderWidth: 1,
              color: "transparent",
            },
            outline: {
              show: true,
              itemStyle: {
                borderColor: this.outerColor,
                borderWidth: 2,
              },
              borderDistance: 3,
            },
            label: {
              normal: {
                formatter: (it) =>
                  this.labelNeedPer
                    ? it.data * 100 + "%"
                    : (it.data * 100).toFixed(2),
                textStyle: {
                  fontSize: 31,
                },
              },
            },
          },
          {
            name: "外层细环",
            type: "pie",
            radius: ["84%", "84.5%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  normal: {
                    color: "#10B9FF",
                  },
                },
              },
            ],
          },
          {
            name: "外层粗环",
            type: "pie",
            radius: ["82%", "86.5%"], //使得细环位于粗环中间
            center: ["50%", "50%"],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
            },
            data: [
              {
                value: this.chartData * 1,
                itemStyle: {
                  normal: {
                    color: this.outerColor,
                  },
                },
              },
              {
                value: 100 - this.chartData * 1,
                itemStyle: {
                  normal: {
                    color: "transparent",
                  },
                },
              },
            ],
          },
        ],
      };
      this.myChart.setOption(option);
    },
    chartChange() {
      this.myChart && this.myChart.resize();
    },
  },
  mounted() {
    this.initChart();
  },
  watch: {
    chartData: {
      handler(n) {
        if (n !== null && n !== void 0) {
          this.initChart();
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
#home {
  width: 100%;
  height: 100%;
}
</style>
